{% extends "SalarySysMenu/Main.html" %}
{% load staticfiles %}

{% block CSSAnotherhead %}
<link rel="stylesheet" href="{% static 'plugins/timepicker/bootstrap-timepicker.min.css'%}">
<link rel="stylesheet" href="{% static 'bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css'%}">
{% endblock %}
{% block loadJSfirst %}
<script>
  function loaddd() {

    document.getElementById("staffID").disabled = true;
    document.getElementById("examplename").disabled = true;
    document.getElementById("detailtype").disabled = true;
    document.getElementById("datepicker").disabled = true;
    document.getElementById("time1").disabled = true;
    document.getElementById("time2").disabled = true;
    document.getElementById("time3").disabled = true;
    document.getElementById("time4").disabled = true;
    document.getElementById("details").disabled = true;
    document.getElementById("backup").disabled = true;

    if (document.getElementById("FinishBack").value == 1) {
      document.getElementById("topcolor").style.borderTopColor = "#f39c12";
      document.getElementById("change111").style.display = "inline";
      document.getElementById("undoo").style.display = "inline";
    }
    if (document.getElementById("FinishBack").value == 3) {
      changemessage();

    }
    if (document.getElementById("FinishBack").value == 0) {
      document.getElementById("topcolor").style.borderTopColor = "#00a65a";
    }
    if (document.getElementById("FinishBack").value == 2) {
      document.getElementById("topcolor").style.borderTopColor = "#6A6F69";
    }
    if (document.getElementById("FinishBack").value == 4) {
      document.getElementById("topcolor").style.borderTopColor = "#dd4b39";
    }
  }
  function changemessage() {
    document.getElementById("staffID").disabled = false;
    document.getElementById("examplename").disabled = false;
    document.getElementById("detailtype").disabled = false;
    document.getElementById("datepicker").disabled = false;
    document.getElementById("time1").disabled = false;
    document.getElementById("time2").disabled = false;
    document.getElementById("time3").disabled = false;
    document.getElementById("time4").disabled = false;
    document.getElementById("details").disabled = false;
    document.getElementById("backup").disabled = false;
    document.getElementById("change111").style.display = "none";
    document.getElementById("submittt").style.display = "inline";
    document.getElementById("resetreset").style.display = "inline";
    document.getElementById("select33").style.display = "inline";
    document.getElementById("qwqwq").style.display = "none";
  }

</script>
{% endblock %}
{% block bodyhead %}

<body class="hold-transition skin-purple-light sidebar-mini" onload="initPage();loaddd();">

  {% endblock %}

  {% block ModalToShow %}
  {% include 'SalarySysMenu/reference/ModaltypeUndo.html' %}
  {% endblock %}

  {% block MyReoprtDetails %}
  <li class="active"><a href="{% url 'GZGL:MyReportDetails' %}"><i class="glyphicon glyphicon-align-left"></i> <span>
        我的申报单</span></a></li>
  {% endblock %}
  {% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        业务申报
        <small>考勤异常申报</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>

    </section>

    <!-- Main content -->
    <section class="content container-fluid">

      <!--------------------------
        | Your Page Content Here |
        -------------------------->
      <div class="col-md-8">
        <!-- general form elements -->
        <div class="box box-primary" id="topcolor">
          <div class="box-header with-border">
            <h3 class="box-title pull-left">业务申报单（考勤异常单）</h3>
            <h3 class="box-title pull-right">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{list.id}}</h3>
            {% include 'SalarySysMenu/reference/ShowFinishBackInMark.html' %}

          </div>
          <!-- /.box-header -->
          <!-- form start -->
          <form action="{% url 'GZGL:ReportSign' %}" method="POST">
            {% csrf_token %}
            <input type="hidden" name="showtype" id="exampleID" value="old">
            <div class="box-body">
              <div class="form-group col-xs-4">
                <label for="exampleID">申报代码</label>

                <input type="text" name="id" class="form-control" id="id" placeholder="申报代码" value="{{list.id}}"
                  disabled>
                <input type="hidden" name="id2" class="form-control" id="id" placeholder="申报代码" value="{{list.id}}">
              </div>
              <div class="form-group col-xs-4">
                <label for="exampleID">业务申报类型</label>
                <input type="text" class="form-control" id="exampleID" value="考勤异常申报" disabled>
                <input type="hidden" name="type" class="form-control" id="type" value="考勤异常申报">
              </div>
              <div class="form-group col-xs-4">
                <label for="exampleID">考勤代码</label>
                <input type="text" class="form-control" id="exampleID" value="{{list.ReportSign_code}}" disabled>
                <input type="hidden" name="signcode" class="form-control" id="signcode"
                  value="{{list.ReportSign_code}}">
              </div>
              <div class="form-group col-xs-6">
                <label for="exampleID">您的员工ID</label>
                <input type="text" name="reportid" class="form-control" id="staffID" placeholder="您的员工ID"
                  value="{{list.ReportSign_id}}" required>
              </div>
              <div class="form-group col-xs-6">
                <label for="exampleInputname">您的姓名</label>
                <input type="text" name="reportname" class="form-control" id="examplename" placeholder="您的姓名"
                  value="{{list.ReportSign_Manname}}" required>
              </div>
              <div class="form-group col-xs-6" id="qwqwq">
                <label for="exampleInputname">异常类型</label>
                <input type="text" name="qwqwq" class="form-control" id="detailtypeh" placeholder="异常类型"
                  value="{{list.ReportSign_name}}" disabled>
              </div>

              <div class="form-group col-xs-6" id="select33" style="display:none;">
                <label>异常类型</label>
                <select name="reportdetailtype" class="form-control" id="detailtype">
                  <option>下班未按时签到</option>
                  <option>系统考勤异常</option>
                </select>
              </div>

              <div class="form-group col-xs-6">
                <label for="inputBirthday">异常考勤时间</label>
                <div class="input-group date">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <input type="text" name="reportdate" class="form-control pull-right" id="datepicker"
                    value="{{list.ReportSign_Date}}" placeholder="异常考勤时间" required>
                </div>
              </div>
              <div class="form-group col-xs-6">
                <label for="exampleInputname">当日上班时间</label>
                <div class="input-group">
                  <input type="text" name="inhour" class="form-control" id="time1" value="{{list.Reportsign_time_hour}}"
                    data-inputmask='"mask": "99"' data-mask>
                  <span class="input-group-addon">:</span>
                  <input type="text" name="inmin" class="form-control" id="time2" value="{{list.Reportsign_time_min}}"
                    data-inputmask='"mask": "99"' data-mask>

                </div>
              </div>
              <div class="form-group col-xs-6">
                <label for="exampleInputname">当日下班时间</label>
                <div class="input-group">
                  <input type="text" name="outhour" class="form-control" id="time3"
                    value="{{list.Reportsignout_time_hour}}" data-inputmask='"mask": "99"' data-mask>
                  <span class="input-group-addon">:</span>
                  <input type="text" name="outmin" class="form-control" id="time4"
                    value="{{list.Reportsignout_time_min}}" data-inputmask='"mask": "99"' data-mask>

                </div>
              </div>






              <div class="form-group col-xs-12">
                <label>考勤异常描述</label>
                <textarea class="form-control" rows="3" name="details" id="details"
                  required>{{list.SignState}}</textarea>
              </div>
              <div class="form-group col-xs-12">
                <label>备 注</label>
                <textarea class="form-control" rows="3" name="backup" id="backup">{{list.BackUpWord}}</textarea>
              </div>
              <div class="form-group col-xs-12">
                <label>Admin 反馈</label>
                <textarea class="form-control" name="backup" rows="3" disabled>{{list.WordBack}}</textarea>
              </div>



            </div>
            <!-- /.box-body -->

            <div class="box-footer">
              <button type="reset" id="resetreset" class="btn btn-default" style="display: none;">重置</button>
              <a href="#myundo"><button type="button" id="undoo" class="btn btn-warning"
                  style="display: none;">撤销申报</button></a>
              <button type="button" id="change111" class="btn btn-primary pull-right" style="display: none;"
                onclick="changemessage()">修改信息</button>
              <button type="submit" id="submittt" class="btn btn-primary pull-right" style="display: none;">提交</button>
            </div>
          </form>

        </div>
        <!-- /.box -->
      </div>

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->


  {% endblock %}

  {% block JSFile %}
  <!-- REQUIRED JS SCRIPTS -->

  <!-- jQuery 3 -->
  <script src="{% static 'bower_components/jquery/dist/jquery.min.js'%}" type="text/javascript"></script>
  <!-- Bootstrap 3.3.7 -->
  <script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js'%}" type="text/javascript"></script>
  <script src="{% static 'bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js'%}"></script>
  <!-- AdminLTE App -->
  <script src="{% static 'dist/js/adminlte.min.js'%}" type="text/javascript"></script>
  <script src="{% static 'plugins/input-mask/jquery.inputmask.js'%}"></script>
  <script src="{% static 'plugins/timepicker/bootstrap-timepicker.min.js'%}"></script>


  <script src="{% static 'bower_components/bootstrap-daterangepicker/daterangepicker.js'%}"></script>
  <script src="{% static 'js/remodal.js'%}" type="text/javascript"></script>

  <!-- Optionally, you can add Slimscroll and FastClick plugins.
      Both of these plugins are recommended to enhance the
      user experience. -->
  <script>
    $(function () {
      //Initialize Select2 Elements


      //Datemask dd/mm/yyyy
      $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })

      //Money Euro
      $('[data-mask]').inputmask()

      //Date picker
      $('#datepicker').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true

      })


    })
  </script>
  <script>
    $(document).on('opening', '.remodal', function () {
      console.log('opening');
    });

    $(document).on('opened', '.remodal', function () {
      console.log('opened');
    });

    $(document).on('closing', '.remodal', function (e) {
      console.log('closing' + (e.reason ? ', reason: ' + e.reason : ''));
    });

    $(document).on('closed', '.remodal', function (e) {
      console.log('closed' + (e.reason ? ', reason: ' + e.reason : ''));
    });

    $(document).on('confirmation', '.remodal', function () {
      console.log('confirmation');
    });

    $(document).on('cancellation', '.remodal', function () {
      console.log('cancellation');
    });

  </script>
  {% endblock %}